import React from 'react'
import './App.css';
import { TabControl } from './cpno/TabControl/TabControl';
import { Solt } from './cpno/solt/Solt';
import { SoltTwo } from './cpno/solt/SoltTwo';

class App extends React.Component{
  constructor(){
    super()
    this.state={
      titles:['流行','新款','精选'],
      titlesName:'流行',
    }
  }
  changeTitleName(index){
    console.log("changeTitleName",index);
    this.setState({
      titlesName:this.state.titles[index]
    })
  }

  render(){
    // 这里对state 进行结构
    const { titles,titlesName } = this.state;
    return (
      <div className="App">
      <header className="App-header">
          <div>hello world</div>
          {/* 注意 这里父组件 给子组件 传的是数组 但是子组件就展示了一次 并没有遍历 组件*/}

          <TabControl getTitleName={(index)=>this.changeTitleName(index)} title={titles}></TabControl>
          <h1>{titlesName}</h1>
          <Solt>
            <span>插槽1-&gt; 上面</span>
            {/* <span>插槽2-&gt; 内容</span>
            <span>插槽3-&gt; 下面</span> */}
          </Solt>
          <SoltTwo 
            centerSolt={<span>我是center内容</span>}
            leftSolt={<span>左边内容</span>}
            rightSolt={<span>右边内容</span>}
            />
      </header>
    </div>
      
    )
  }
}

export default App;
